<template>
  <div
    class="show-info page"
    id="info-print"
  >
    <a-descriptions
      v-if="info"
      class="info"
      title=""
      :column="2"
    >
      <a-descriptions-item label="来访时间">
        {{info.time}}
      </a-descriptions-item>
      <a-descriptions-item label="来访事由">
        {{info.reason}}
      </a-descriptions-item>
      <a-descriptions-item label="姓名">
        {{info.name}}
      </a-descriptions-item>
      <a-descriptions-item label="手机号">
        {{info.phone}}
      </a-descriptions-item>
      <a-descriptions-item label="体温">
        {{info.temperature}}
      </a-descriptions-item>
      <a-descriptions-item label="性别">
        {{info.sex==1?"女":"男"}}
      </a-descriptions-item>
      <a-descriptions-item label="身份证">
        {{info.card}}
      </a-descriptions-item>
      <a-descriptions-item label="单位">
        {{info.unit}}
      </a-descriptions-item>
    </a-descriptions>

    <!-- <table class="table">
        
        <tbody>
        <tr>
        <td class="left">签到时间：</td>
        </tr>
        <tr>
          <td class="right">2015年10月19日 15：30</td>
        </tr>
        <tr>
        <td class="left">学员姓名：</td>
        </tr>
        <tr>
          <td class="right">周深</td>
        </tr>
        <tr>
        <td class="left">班级：</td>
        </tr>
        <tr>
        <td class="right">少儿班</td>
        </tr>
        <tr>
        <td colspan="2"><hr size="1" /></td>
        </tr>
        </tbody>
        </table> -->

    <canvas id="info-code"></canvas>
    <a-button
      class="print-btn"
      type="primary"
      @click="print"
    >
      打印
    </a-button>

    <webview
      v-show="false"
      style="width:200px;height:200px"
      id="printWV"
      ref="printWV"
      :src="printUrl"
      enableremotemodule
      nodeintegration="true"
      nodeintegrationinsubframes
      webpreferences="contextIsolation=no"
    ></webview>
  </div>
</template>

<script>
import QRCode from "qrcode";
import PrintJs from "print-js";
import { ipcRenderer } from "electron";

export default {
  name: "ShowInfo",
  data() {
    return {
      info: {},
      printUrl: "",
    };
  },
  created() {
    this.info = this.$store.getters["getSignInfo"];
    const u = new URLSearchParams();
    for (let key in this.info) {
      u.set(key, this.info[key]);
    }
    u.set("code", this.$store.getters["getQRCode"]);
    this.printUrl = `print.html?${u.toString()}`;
    console.log(u.get('code'),"code");
    // var beforePrint = function () {
    //   console.log("打印前");
    // };

    // var afterPrint = function () {
    //   console.log("打印后");
    // };

    // if (window.matchMedia) {
    //   var mediaQueryList = window.matchMedia("print");
    //   mediaQueryList.addListener(function (mql) {
    //     if (mql.matches) {
    //       beforePrint();
    //     } else {
    //       afterPrint();
    //     }
    //   });
    // }

    // window.onbeforeprint = beforePrint;
    // window.onafterprint = afterPrint;
  },
  mounted() {
    const opt = {
      errorCorrectionLevel: 'H',
      type: 'image/png',
      quality: 1,
      margin: 1,
      width:100,
    };
    const code = this.$store.getters["getQRCode"];
    QRCode.toCanvas(
      document.getElementById("info-code"),
      code,
      opt,
      function (error) {
        if (error) console.error(error);
      }
    );

    // //获取打印机列表
    // ipcRenderer.invoke("getPrintList").then((res) => {
    //   this.$store.commit("setPrintList", res);
    // });

    // const webview = this.$refs.printWV;
    // webview.addEventListener("ipc-message", (event) => {
    //   console.log(event.channel);
    //   if (event.channel === "webview-print-do") {
    //     //如果收到<webview>传过来的事件，名为"webview-print-do"，就执行 webview.print打印方法，打印<webview>里面的内容。
    //     webview.print(
    //       {
    //         //是否是静默打印
    //         silent: false,
    //         printBackground: true,
    //         //打印机的名称，就是本文一开始获得的打印机列表其中一个
    //         deviceName: "XP-58",
    //       }
    //     );
    //   }
    // });
  },

  methods: {
    print() {
      const webview = this.$refs.printWV;
      // 发送信息到<webview>里的页面
      webview.print({
        //是否是静默打印
        silent: true,
        printBackground: false,
        //打印机的名称，就是本文一开始获得的打印机列表其中一个
        deviceName: "XP-58"
      });
      setTimeout(() =>{
        this.$router.push({
          name:"home-sign"
        });
      },3000)
    },
  },
};
</script>

<style lang="scss" scoped>
.show-info {
  height: calc(100% - 45px);
  width: 100%;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  overflow-y: scroll;
  .info {
    width: 80%;
    ::v-deep {
      .ant-descriptions-item-content,
      .ant-descriptions-item-label {
        color: white;
      }
    }
  }

  #info-code {
    height: 100px;
    width: 100px;
    margin: 20px;
  }
}
.info ::v-deep .ant-descriptions-title {
  color: red;
}
</style>